<template>
  <transition
      enter-active-class="scale-enter-active"
      leave-active-class="scale-leave-active"
      name="scale"
  >
    <div
        style="z-index: 99999"
        ref="panelRef"
        :class="{ 'is-open': isOpen }"
        class="control-panel"
        @click="isOpen = !isOpen"
        @mouseleave="isHovered = false;isOpen = false"
        @mouseover="isHovered = true"
    >
      <transition name="fade">
        <div v-if="!isOpen" class="control-ball">
          <el-icon class="rotating" :size="20">
            <Setting/>
          </el-icon>
        </div>
      </transition>

      <transition name="slide">
        <div v-if="isOpen" class="panel-content">
          <div style="font-size: small;font-family: 'Arial Black'">控制面板</div>
          <el-button @click="item => {this.$router.push('/index')}">主页</el-button>
          <el-button @click="item => {this.$router.push('/')}">登录</el-button>
          <el-button @click="item => {this.$router.push('/test')}">测试</el-button>
          <el-button @click="item => {this.$router.push('/register')}">注册</el-button>
          <el-button type="danger"
                     @click="switchTestMode();">
            PRESS ME
          </el-button>
        </div>
      </transition>
    </div>
  </transition>

</template>

<script setup>
import {onMounted, ref} from 'vue';
import {Setting} from '@element-plus/icons-vue';
import {ElMessage} from "element-plus";
import {user} from '@/stores/counter.js'

const userStore = user();
const panelRef = ref(null);
const isOpen = ref(false);
const isHovered = ref(false);

onMounted(() => {
  // 获取控制面板的宽度
  const panelWidth = panelRef.value.offsetWidth;
  if(!localStorage.getItem('testMode')){
    localStorage.setItem("testMode",'true');
  }
  
});

function switchTestMode(){c
  let testMode=localStorage.getItem('testMode') === 'true';
  localStorage.setItem('testMode',JSON.stringify(!testMode));
  testMode=!testMode;
  if(testMode){
    ElMessage.success('测试模式启动')
  }else if(!testMode){
    ElMessage.error('测试模式关闭')
  }else{
    ElMessage.info('测试模式故障')
  }
}

</script>

<style scoped>
.control-panel {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  cursor: pointer;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.control-ball {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.rotating {
  animation: rotating 6s linear infinite;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.is-open {
  right: 20px;
  transition: right 0.3s ease-in-out;
}

.panel-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 150px;
  max-height: 500px;
  overflow-y: auto;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease-in-out;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.slide-enter-active,
.slide-leave-active {
  transition: transform 0.3s ease-in-out;
}

.slide-enter-from,
.slide-leave-to {
  transform: translateX(100%);
}

.scale-enter-active,
.scale-leave-active {
  transition: transform 0.3s ease-in-out;
}

.scale-enter-from,
.scale-leave-to {
  transform: scale(0.8);
}
</style>